{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"报价详情",back:1} %}
    <div class="bc13 pad5">
        <div class="bcf pad6 round3 bdbda fs9 c12 flrc">
            <span class="fa fa-th-large c12"></span>
            <span class="fs10 c11 padl5 flex1">[[en.title]]</span>
{#            <span class="padl5 padr5 padt3 padb2 fs6 bdso bdc11 c11 round2">[[en.cat2.name]]</span>#}
            <span class="padl5 padr5 padt3 padb2 fs8   c12 ">/ [[en.cat2.name]] /</span>
        </div>
        <div class="bcf pad6 round3 bdbda fs9 c12 flex-r flex-start fs8 c11 lh2">
            <div class="flex1">
                <div class="flex-r">
                    <div>预约时间：</div>
                    <div>[[str2time(en.bookAt)]]</div>
                </div>
                <div class="flex-r">
                    <div>备注信息：</div>
                    <div>[[en.tips]]</div>
                </div>
                <div class="flex-r">
                    <div>区域限制：</div>
                    <div v-if="isTrue(en.favorProvince)">
                        <span v-if="isTrue(en.favorProvince)">[[en.favorProvince]]</span>
                        <span v-if="isTrue(en.favorCity)"> / [[en.favorCity]]</span>
                        <span v-if="isTrue(en.favorArea)"> / [[en.favorArea]]</span>
                    </div>
                    <div v-if="!isTrue(en.favorProvince)">不限制</div>
                </div>
                <div class="flex-r flex-start" v-if="isTrue(en.favor)">
                    <div>雇佣要求：</div>
                    <div class="flex1">
                        <div v-if="isTrue(en.favor.isInsurance)">优先 <span class="c1">保证金商家</span></div>
                        <div v-if="isTrue(en.favor.isCompany)">优先 <span class="c1">企业认证商家</span></div>
                    </div>
                </div>

                <div class="flex-r flex-start" v-if="isTrue(en.price)">
                    <div>其他要求：</div>
                    <div class="flex1">
                        一口价 [[en.price]]
                    </div>
                </div>
                <div class="flex-r flex-start c2 bdso bdc2 round3 mar5 tac" v-if="isTrue(en.votePrice)">
                    <div></div>
                    <div class="flex1 ">
                        成交价格：<span class="fwb">[[en.votePrice]]</span>
                    </div>
                    <div></div>
                    <div class="flex1 " v-if="isTrue(myVote)">
                        我的报价：<span class="fwb">[[myVote]]</span>
                    </div>
                    <div class="flex1" v-if="!isTrue(myVote)">未参与报价</div>
                </div>
{#                <div class="flex1 bc11 c13 flcc pad8 pos-r" v-if="isTrue(myVote)">#}
{#                    我的报价[[myVote]]#}
{#                </div>#}
            </div>
        </div>
        <div  v-if="en.status < 300">

            <div class="bc2 pad5 round5 flrc fs8 c13 op8 lh2" v-if="timeLeft(en.expireAt) != '已过期'">
                订单倒计时：[[timeLeft(en.expireAt)]]
            </div>
            <div class="bc12 pad5 round5 flrc fs8 c11 op5 lh2" v-if="timeLeft(en.expireAt) == '已过期'">
                订单已过期
            </div>
        </div>

    </div>
    <div class="bc13 pad5">
        <div class="bcf pad6 round3 bdbda fs9 c12">
            位置信息
        </div>
        <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2">
            <div class="flex1 fs8">
                <div v-if="myVoteStatus != 1"> [[en.address.addressDeal]] </div>
                <div v-if="myVoteStatus == 1"> [[en.address.address]] </div>
                <div> [[en.address.province]] / [[en.address.city]] / [[en.address.area]]</div>
            </div>
            <div class="c12 padl10" @click="navTo(en.address.lat,en.address.lon,en.address.address)" v-if="myVoteStatus == 1">
                <div class="wh10-10 flcc bc02 c13 round fs10  pos-r">
                    <mu-ripple><span class="fa fa-location-arrow"></span></mu-ripple>
                </div>
            </div>
        </div>
    </div>
    <div class="bc13 pad5">
        <div class="bcf pad6 round3 bdbda fs9 c12">
            联系人
        </div>
        <div class="bcf pad6 round3 bdbda fs9 c12 flrc fs8 c11 lh2">
            <div class="flex1 flrc">
                <div class="flex1">[[en.contact.name]]</div>
                <div v-if="myVoteStatus == 1 || gotPhone == 1">[[en.contact.phone]]</div>
                <div v-if="myVoteStatus != 1 && gotPhone != 1">雇佣后可以查看雇主电话</div>
            </div>
            <div class="c12 padl10" v-if="myVoteStatus == 1 || gotPhone == 1">
                <div @click="call(en.contact.phone)" class="wh10-10 flcc bc01 c13 round fs10">
                    <span class="fa fa-phone"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="bc13 pad5">
        <div class="bcf pad6 round3 bdbda fs9 c12">
            订单信息
        </div>
        <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
            <div>任务编号：[[en.sn]]</div>
            <div>创建时间：[[str2time(en.createAt)]]</div>
        </div>
    </div>
    <div class="bc13 pad5">
        <div class="bcf pad6 round3 bdbda fs9 c12">
            图片附件
        </div>
        <div class="bcf pad6 round3 bdbda fs9 c12 fs8 c11 lh2">
             <img :src="picUrl(item)" class="w100" alt="" v-for="item in en.pics" onerror="this.src=pic404">
{#            <div class="flex-r flex-start padt6 padb6">#}
{#                <div class="scrollX-Box flex-start">#}
{#                    <div class="scrollX-Item marr5 pos-r" v-for="item in 4">#}
{#                         <img :src="picUserHead" class="wh30-30 scrollX-Item" alt="" onerror="this.src=pic404">#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
        </div>
    </div>
{#    <div class="bc13 pad5 marb30">#}
{#        <div class="bcf pad6 round3 bdbda fs9 c12">#}
{#            注意事项#}
{#        </div>#}
{#        <div class="bcf pad6 round3 bdbda fs8 c12 fs8 c11 lh2">#}
{#            <div><span class="fa fa-caret-right padr5"></span>接单报价入门须知？</div>#}
{#            <div><span class="fa fa-caret-right padr5"></span>如何正确预约？</div>#}
{#            <div><span class="fa fa-caret-right padr5"></span>上门后如何规范服务？</div>#}
{#            <div><span class="fa fa-caret-right padr5"></span>完工后如何确认订单？</div>#}
{#        </div>#}
{#    </div>#}

    {#<div class="bc13 c13 pad10">#}
        {#this is the end#}
    {#</div>#}
    <div class="pos-f b0 l0 r0 bcf tac flrc flex-fill bdtso" v-if="timeLeft(en.expireAt) != '已过期' && en.status < 300">
        <div class="flex1  c1 pos-r">
            <mu-ripple @click="goback()">
                返回
            </mu-ripple>
        </div>
        <div class="flex1 bc3 c13 flcc pad8 pos-r"v-if="myVoteStatus == 0 && gotPhone != 1" >
            <mu-ripple @click="getPhone()">
                积分兑电话
            </mu-ripple>
        </div>
        <div class="flex1 bc2 c13 flcc pad8 pos-r" v-if="!isTrue(myVote)">
            <mu-ripple  @click="goto('taskVote',{id:en.id,price:en.price})">
{#                [[isTrue(en.price)?'一口价 ￥' + en.price:'立刻报价']]#}
                立刻报价
            </mu-ripple>
        </div>
        <div class="flex1 bc11 c13 flcc pad8 pos-r" v-if="isTrue(myVote)">
            <mu-ripple  @click="goto('taskVote',{id:en.id,price:en.price})">
                我的报价[[myVote]]
            </mu-ripple>
        </div>
    </div>

{% endblock %}
    {% block myJs %}
        <script src="{{ root }}/js/0map.nav.js{{ rnd }}"></script>
    {% endblock %}